import Base from "../Base.js";
import theatersApi from "../../api/theaters.js";
import seatsApi from "../../api/seats.js";
import kexuanImg from "../../img/kexuan.jpg";
export default class extends Base {
    constructor(props) {
        super(props);
        this.T_id = props._id;
        this.theater = {};
        this.seat = {};
    }
    handle() {
        $("#initSeats").on("click", async e => {
            this.seat.row = $("input[name=row]").val();
            this.seat.col = $("input[name=col]").val();
            this.createSeatsArr(this.seat.row, this.seat.col);
            this.reRender();
        })
        $("table").on("click", "img", e => {
            const row = $(e.target).attr("row");
            const col = $(e.target).attr("col");
            if (e.target.dataset.state == "true") {
                e.target.dataset.state = false;
                $(e.target).css({ opacity: 0 });
                this.seat.seatsArr[row][col] = 0;
            }
            else {
                e.target.dataset.state = true;
                $(e.target).css({ opacity: 1 });
                this.seat.seatsArr[row][col] = 1;
            }
        })
        $("#save").on("click", async e => {
            this.seat.seatsArr = JSON.stringify(this.seat.seatsArr);
            await seatsApi.update(this.seat);
            this.seat.seatsArr = JSON.parse(this.seat.seatsArr);
        })
    }
    createSeatsArr(row, col) {
        this.seat.seatsArr = [];
        for (let i = 1; i <= row; i++) {
            let arr = [];
            for (let i = 1; i <= col; i++) {
                arr.push(1);
            }
            this.seat.seatsArr.push(arr);
        }
    }

    render() {
        this.el.html(`
            <article style="display:flex;">
                <form class="layui-form" action="">
                    <h1 style="margin: 0 0 20px 63px;" class="tname"></h1>
                    <div class="layui-form-item">
                        <label class="layui-form-label">行数:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="row" required  lay-verify="required" autocomplete="off" class="layui-input" value="9" style="width:50px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">列数:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="col" required  lay-verify="required" autocomplete="off" class="layui-input" value="9" style="width:50px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选项:</label>
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn"  id="initSeats" value="初始化座位">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn"  id="save" value="保存">
                        </div>
                    </div>
                </form>
                <table>
                    <tbody class="seats">
                    </tbody>
                </table>
            </article>
        `);
        this.tnameEle = $(".tname");
        this.seatsEle = $(".seats");
    }
    reRender() {
        let str = '';
        str += '<table><tbody class="seat">';
        this.seat.seatsArr.map((items, indexs) => {
            str += `<tr class="row">`;
            items.map((item, index) => {
                str += `<td class="col">`;
                if (item != 0) {
                    str += `<img src="${kexuanImg}"/ row=${indexs} col=${index} data-state="true">`;
                }
                else {
                    str += `<img src="${kexuanImg}"/ row=${indexs} col=${index} data-state="false" style="opacity: 0;">`;
                }
                str += `</td>`;
            })
            str += `</tr>`;
        });
        str += '</tbody></table>';
        this.seatsEle.html(str);
        $(".col").css({
            width: 52 + "px",
            height: 52 + "px",
        })
    }

    async mounted() {
        await this.getTheater();
        await this.getSeat();
    }
    async getTheater() {
        this.theater = await theatersApi.getOne(this.T_id);
        this.tnameEle.html(this.theater.name);
    }
    async getSeat() {
        this.seat = await seatsApi.getOne(this.T_id);
        if (this.seat.seatsArr) {
            this.reRender();
        }
    }
}
